﻿<!DOCTYPE HTML>
<html>
	<head>
		<title>Jquery实现一款黑色简洁大气的图片轮播特效</title>
		<link href="goble.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<style>
			/* qqshop focus */
			#focus {
				width: 680px;
				height: 355px;
				overflow: hidden;
				position: relative;
			}
			#focus ul {
				height: 355px;
				position: absolute;
				bottom: 0;
			}
			#focus ul li {
				float: left;
				width: 680px;
				height: 355px;
				overflow: hidden;
				position: relative;
			}
			#focus ul li div {
				position: absolute;
				overflow: hidden;
			}
			#focus ul li p {
				color: #FFF;
				font-size: 12px;
				height: 28px;
				line-height: 28px;
				position: absolute;
				bottom: 0;
				left: 15px;
			}
			#focus .btnBg {
				background: red;
			}
			#focus .btn {
				position: absolute;
				bottom: 5px;
				right: 5px;
				z-index: 10;
			}
			#focus .btn span {
				background: #8C8C8C;
				width: 62px;
				height: 7px;
				cursor: pointer;
				display: block;
				float: left;
				margin-left: 1px;
				text-indent: -100em;
				overflow: hidden;
			}
			#focus .btn span.on, #focus .btn span:hover {
				background: url(style/images/shouye/xinBtnBg.png) -63px 0;
			}
			#focus .preNext {
				width: 80px;
				height: 80px;
				position: absolute;
				top: 90px;
				background: url(left.png) no-repeat 0 0;
				cursor: pointer;
			}
			#focus .pre {
				left: 0;
				background: url(right.png);
			}
			#focus .next {
				right: 0;
				background-position: right top;
				background: url(left.png);
			}
		</style>
		<br />
		<br />
		<div style="width:980px; height:355px; overflow:hidden; margin:40px auto;">
			<div id="focus">
				<ul>
					<li>
						<a href="http://www.jq-school.com/" target="_blank"><img src="胡歌.jpg" width="980" height="355"></a>
						<p>1</p>
					</li>
					<li>
						<a href="http://www.jq-school.com/Show.aspx?id=262" target="_blank"><img src="胡歌.jpg" width="980" height="355"></a>
						<p>2</p>
					</li>
					<li>
						<a href="http://www.jq-school.com/Alipay.aspx" target="_blank"><img src="xinbanner01.jpg" width="980" height="355"></a>
						<p>3</p>
					</li>
					<li>
						<a href="http://www.jq-school.com/" target="_blank"><img src="xinbanner01.jpg" width="980" height="355"></a>
						<p>4</p>
					</li>
					<li>
						<a href="http://www.jq-school.com/" target="_blank"><img src="xinbanner01.jpg" width="980" height="355"></a>
						<p>5</p>
					</li>
				</ul>
			</div>
		</div>
		<script src="../common_js/jquery-1.7.2.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="slider.js"></script>
	</body>
</html>
